<template>
  <div class="mapControl-con">
    <!-- <div
      v-if="maptype == 2"
      v-for="(item, i) in asliderbarList3"
      :key="i"
      @click="checkoutBar(item)"
    >
      {{ item.name }}
    </div>
    <div
      v-if="maptype == 3"
      v-for="(item, i) in asliderbarList2"
      :key="i"
      @click="checkoutBar(item)"
    >
      {{ item.name }}
    </div> -->
    <div
      v-for="(item, index) in controlList[3]"
      :key="index"
      class="control-item"
      @click="checkoutBar(item)"
    >
      <div class="control-item-img">
        <!-- {{ item.name }} -->
        <img :src="item.img" height="41" width="41" />
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
export default {
  name: "Asliderbar",
  computed: {
    // maptype() {
    //   return this.$store.getters.maptype;
    // },
  },
  data() {
    return {
      controlList: {
        2: [
          {
            name: "放大",
            value: "ZoomOut",
            img: require("@/assets/control/FangDa.png"),
            type: 2,
          },
          {
            name: "重置",
            value: "GoHome",
            img: require("@/assets/control/FuWei.png"),
            type: 2,
          },
          {
            name: "缩小",
            value: "ZoomIn",
            img: require("@/assets/control/SuoXiao.png"),
            type: 2,
          },
          // {
          //   name: "指南针",
          //   value: "",
          //   img: require("@/assets/control/znz.png"),
          //   type: 2,
          // },
          // {
          //   name: "二三维",
          //   value: "ViewType",
          //   img: require("@/assets/control/QieHuan-2.png"),
          //   type: 3,
          // },
        ],
        3: [
          {
            name: "放大",
            value: "ZoomOut",
            img: require("@/assets/control/FangDa.png"),
            type: 3,
          },
          {
            name: "重置",
            value: "GoHome",
            img: require("@/assets/control/FuWei.png"),
            type: 3,
          },
          {
            name: "缩小",
            value: "ZoomIn",
            img: require("@/assets/control/SuoXiao.png"),
            type: 3,
          },
          // {
          //   name: "指南针",
          //   value: "",
          //   img: require("@/assets/control/znz.png"),
          //   type: 3,
          // },
          // {
          //   name: "二三维",
          //   value: "ViewType",
          //   img: require("@/assets/control/QieHuan-3.png"),
          //   type: 2,
          // },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    checkoutBar(item) {
      // console.log(e);
      Bus.$emit(item.value, item.type);
    },
  },
};
</script>

<style lang="scss" scoped>
.mapControl-con {
  position: absolute;
  bottom: 38px;
  right: 22px;
  z-index: 999;
  .control-item {
    display: flex;

    .control-item-img {
      width: 50px;
      height: 48px;
      display: flex;
      background-color: rgba(255, 123, 234, 0);
      align-items: center;
      margin-left: 20px;
    }
  }
}
</style>
